<template>
  <view class="container">
      <clock-profile @submit="submit" :visiable.sync="display" />
  </view>
</template>

<script>
import ClockProfile from '../../../components/ClockProfile';
import { createClockItem } from '../../../api/clock';
export default {
    name: 'create',
    props: {
        visiable: {
            type: Boolean
        }
    },
    data() {
        return {
            display: true,
        }
    },
    watch: {
        visiable(val) {
            if (val) {
                this.display = true;
            }
        },
        display(val, old) {
            if (!val) {
                this.$emit('update:visiable', false);
            }
        }
    },
    methods: {
        async submit(item) {
            const { name, tag, target } = item;
            const req = await createClockItem(name, tag, target);
            const data = req.data;
            if (data.success) {
                this.$emit('submit', {
                    name,
                    tags: tag,
                    target,
                    id: data.id,
                });
                this.display = false;
            }
        }
    },
    components: {
        ClockProfile
    }
}
</script>

<style scoped>

</style>